<template >
    <div>
        <div class="headerstyle">全井固井质量合格率查询</div>
        <el-form
            :inline="true"
            :model="searchModel"
            style="margin-top: 10px; margin-bottom: 5px; border-bottom: 1px solid rgb(235, 237, 230)"
        >
            <el-row>
                <el-col :sm="8" :md="8" :lg="4" :xl="3">
                    <el-form-item>
                        <el-select v-model="searchModel.oilfield" clearable placeholder="请选择油田">
                            <el-option v-for="item in oilfieldOptions" :key="item" :label="item" :value="item" :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :sm="8" :md="8" :lg="4" :xl="3">
                    <el-form-item>
                        <el-input placeholder="请填写井名" v-model="searchModel.wellname" clearable maxlength="20" />
                    </el-form-item>
                </el-col>
                <el-col :sm="8" :md="8" :lg="4" :xl="3">
                    <el-form-item>
                        <el-select v-model="searchModel.block" clearable placeholder="请选择区块">
                            <el-option v-for="item in blockOptions" :key="item" :label="item" :value="item" :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :sm="8" :md="8" :lg="4" :xl="3">
                    <el-form-item>
                        <el-select v-model="searchModel.welltype" clearable placeholder="请选择井别">
                            <el-option v-for="item in welltypeOptions" :key="item" :label="item" :value="item" :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :sm="8" :md="8" :lg="4" :xl="3">
                    <el-form-item>
                        <el-select v-model="searchModel.wellcategory" clearable placeholder="请选择井型">
                            <el-option
                                v-for="item in wellcategoryOptions"
                                :key="item"
                                :label="item"
                                :value="item"
                                :disabled="item.disabled"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :sm="16" :md="16" :lg="8" :xl="5">
                    <el-form-item>
                        <el-date-picker
                            v-model="searchModel.startdrilldate"
                            type="date"
                            align="right"
                            value-format="yyyy-MM-dd"
                            style="width: 47%"
                            placeholder="开始日期"
                        >
                        </el-date-picker>
                        <span style="color: #c0c0c0">&nbsp;-&nbsp;</span>
                        <el-date-picker
                            v-model="searchModel.enddrilldate"
                            type="date"
                            align="right"
                            value-format="yyyy-MM-dd"
                            style="width: 47%"
                            placeholder="结束日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                        <el-button type="primary" @click="submitSearchModel">查询</el-button>
				        <el-upload class="upload-demo" :http-request="importExcel" :show-file-list="false" action="">
				            <el-button type="success" >导入</el-button>
				        </el-upload>
				        <el-button type="primary" @click="DownLoadModel">模板下载</el-button>
            </el-row>
        </el-form>
        <div class="headerstyle" v-if="tableshow">查询统计信息表</div>
        <el-row v-if="tableshow" style="margin-top: 10px; border-bottom: 1px solid rgb(235, 237, 230)">
            <el-col :span="5.5">
                <el-table :data="countTableData" border style="margin-bottom: 10px" v-if="tableshow">
                    <el-table-column prop="qualifiedWellNum" label="合格井数" width="120" align="center"> </el-table-column>
                    <el-table-column prop="unqualifiedWellNum" label="不合格井数" width="120" align="center"> </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <div class="headerstyle" style="margin-top: 10px" v-if="tableshow">统计图</div>

        <el-row v-if="tableshow" style="margin-botton: 10px; border-bottom: 1px solid rgb(235, 237, 230)">
            <div id="countChart"></div>
        </el-row>
        <div class="headerstyle" style="margin-top: 10px; margin-bottom: 10px">查询数据</div>
        <div>
            <el-table :data="totalTableData" border stripe style="margin-bottom: 0px; width: 90%；">
                <template slot="empty">
                    <span>查询为空</span>
                </template>

                <el-table-column type="index" label="序号" width="50" align="center">
                    <template slot-scope="scope">
                        <span>{{ (searchModel.currentPage - 1) * searchModel.pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="油田" prop="oilfield" align="center" width=""> </el-table-column>
                <el-table-column label="井名" prop="wellname" align="center" width=""> </el-table-column>
                <el-table-column label="区块 " prop="block" align="center" width=""> </el-table-column>
                <el-table-column label="项目单位/采油厂" prop="department" align="center" width=""> </el-table-column>
                <el-table-column label="井型" prop="welltype" align="center" width=""> </el-table-column>
                <el-table-column label="井别" prop="wellcategory" align="center" width=""> </el-table-column>
                <el-table-column label="油藏类型" prop="reservoirtype" align="center" width=""> </el-table-column>
                <el-table-column label="目的层 " prop="objectposition" align="center" width=""> </el-table-column>
                <el-table-column label="设计井深" prop="welldepth1" align="center" width=""> </el-table-column>
                <el-table-column label="开钻日期" prop="startdrilldate" align="center" width=""> </el-table-column>
                <el-table-column label="完钻日期" prop="enddrilldate" align="center" width=""> </el-table-column>
                <el-table-column label="完井日期" prop="finishWellDate" align="center" width=""> </el-table-column>
                <el-table-column label="搬安日期" prop="resetdate" align="center" width=""> </el-table-column>
                <el-table-column label="实际斜深(m)" prop="realbiasdepth" align="center" width=""> </el-table-column>
                <el-table-column label="实际垂深(m)" prop="realvertdepth" align="center" width=""> </el-table-column>
                <el-table-column label="进尺" prop="footage" align="center" width=""> </el-table-column>
                <el-table-column label="钻井周期" prop="drillperiod" align="center" width=""> </el-table-column>
                <el-table-column label="建井周期" prop="buildperiod" align="center" width=""> </el-table-column>

                <el-table-column label="完井周期" prop="finishperiod" align="center" width=""> </el-table-column>
                <el-table-column label="机械钻速" prop="drillrate" align="center" width=""> </el-table-column>
                <el-table-column label="井身质量（行标）" prop="wellquality1" align="center" width=""> </el-table-column>
                <el-table-column label="井身质量（红线）" prop="wellquality2" align="center" width=""> </el-table-column>
                <el-table-column label="固井质量（行标）" prop="cementquality1" align="center" width=""> </el-table-column>
                <el-table-column label="固井质量（红线）" prop="cementquality2" align="center" width=""> </el-table-column>
                <el-table-column label="取心进尺" prop="corefootage" align="center" width=""> </el-table-column>

                <el-table-column label="岩芯长度" prop="corelength" align="center" width=""> </el-table-column>
                <el-table-column label="新工艺技术应用" prop="newtech" align="center" width=""> </el-table-column>
                <el-table-column label="承包商单位" prop="contractor" align="center" width=""> </el-table-column>

                <el-table-column label="承包单位性质" prop="contractorcharacter" align="center" width=""> </el-table-column>

                <el-table-column label="井承包方式" prop="contractmethod" align="center" width=""> </el-table-column>

                <el-table-column label="井身结构钻头程序" prop="wellStructureBitProgram" align="center" width="800px"> </el-table-column>
                <el-table-column label="井身结构套管程序" prop="wellStructureCaseProgram" align="center" width="800px"> </el-table-column>
                <el-table-column label="钻探公司" prop="drillcompany" align="center" width=""> </el-table-column>
                <el-table-column label="钻井公司" prop="drillwellcompany" align="center" width=""> </el-table-column>
                <el-table-column label="钻井队号" prop="drillteam" align="center" width=""> </el-table-column>

                <el-table-column label="总时间" prop="totaltime" align="center" width=""> </el-table-column>
                <el-table-column label="生产时间" prop="producttime" align="center" width=""> </el-table-column>
                <el-table-column label="非生产时间" prop="noproducttime" align="center" width=""> </el-table-column>

                <el-table-column label="纯钻时间" prop="puredrilltime" align="center" width=""> </el-table-column>
                <el-table-column label="事故时间" prop="accidenttime" align="center" width=""> </el-table-column>
                <el-table-column label="复杂情况处理时间" prop="troubletime" align="center" width=""> </el-table-column>
                <el-table-column label="组织停工时间" prop="stopworktime" align="center" width=""> </el-table-column>

                <el-table-column label="事故复杂及组停原因" prop="accidentsource" align="center" min-width="800px"> </el-table-column>
                <el-table-column label="钻头数" prop="bitnumber" align="center" width=""> </el-table-column>
                <el-table-column label="钻头数牙轮" prop="bitconenumber" align="center" width=""> </el-table-column>

                <el-table-column label="钻头数PDC" prop="bitpdcnumber" align="center" width=""> </el-table-column>
                <el-table-column label="备注" prop="note" align="center" width=""> </el-table-column>
            </el-table>

            <!-- 显示页数 -->
            <div style="float: right">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="searchModel.currentPage"
                    :page-size="searchModel.pageSize"
                    :total="totalData"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { QualityPassRateFind } from '../../../api/module/statisticalAnalysis/AllCementingQualityPassRate';
import { ListDataDictByCondition, GetTableHead } from '../../../api/module/dataClassification/data_classification';
import * as echarts from 'echarts';
import { importExcel, downTemplateExcel } from '../../../api/module/dataClassification/excel.js'
export default {
    data() {
        return {
            searchModel: {
                currentPage: 1, //当前页
                pageSize: 8, //页大小
                oilfield: '', //油田
                wellname: '', //
                block: '',
                welltype: '', //井别
                wellcategory: '', //井型
                startdrilldate: '',
                enddrilldate: ''
            },
            //判断是否分页点击
            isPageClick:false,

            totalData: 0,
            //下拉列表
            oilfieldOptions: [],
            blockOptions: [],
            welltypeOptions: [],
            wellcategoryOptions: [],
            //第一个统计数量表的数据
            countTableData: [
                {
                    qualifiedWellNum: '',
                    unqualifiedWellNum: ''
                }
            ],
            tableHead: [],
            totalTableData: [],
            tableshow: true, //表格最初不显示
            //图表数据
            countChartData: {
                xAxis: {
                    type: 'category',
                    data: ['合格井数', '不合格井数'],
                    axisLabel: {
                        textStyle: {
                            show: true,
                            fontFamily: '微软雅黑',
                            color: 'black',
                            fontWeight: 600,
                            fontSize: '16'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1 //y轴最小间距为1
                },
                series: [
                    {
                        name: '数量',
                        data: [],
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                //柱状颜色不同
                                color: function (params) {
                                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                    var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
                                    return colorList[params.dataIndex];
                                }
                            }
                        }
                    }
                ]
            }
        };
    },
    created() {
        this.GetList();
        this.QualityPassRateFind();
        this.GetTable();
    },
    mounted() {
        // this.echartshow();
    },
    methods: {
		//excel导入数据
		    importExcel(item) {
		        const formData = new FormData();
		        formData.append('file', item.file);
		        importExcel(formData, 'WellDrillInfoExcelOperationStrategy')
		            .then((res) => {
		                console.log('excel导入...');
		                console.log(res);
		                this.QualityPassRateFind();
		            })
		            .catch((err) => {
		                console.log(err);
		            });
		    },
		    //下载模板
		    DownLoadModel() {
		        //下载excel模板
		        downTemplateExcel('welldrill_info').then((res) => {
		            console.log(res);
		            if (!res) {
		                return;
		            }
		            const link = document.createElement('a');
		            let blob = new Blob([res]);
		            link.style.display = 'none';
		            link.href = URL.createObjectURL(blob);
		            link.setAttribute('download', '完成井钻井基础资料统计模板-汇总.xlsx');
		            document.body.appendChild(link);
		            link.click();
		            document.body.removeChild(link);
		        });
		    },
        handlePageChange(pageidx) {
            this.isPageClick=true;
            this.searchModel.currentPage = pageidx;
            this.QualityPassRateFind();
        },
        GetTable() {
            GetTableHead('welldrill_info').then((res) => {
                console.log('res表头数据');
                console.log(res);
                this.tableHead = res.data;

                this.tableHead[9].label = this.tableHead[9].label + '(m)';
                this.tableHead[13].label = '实际斜深(m)';
                this.tableHead[14].label = '实际垂深(m)';
                this.tableHead[34].label = this.tableHead[34].label + '(min)';
                this.tableHead[35].label = this.tableHead[35].label + '(min)';
                this.tableHead[36].label = this.tableHead[36].label + '(min)';
                this.tableHead[37].label = this.tableHead[37].label + '(min)';
                this.tableHead[38].label = this.tableHead[38].label + '(min)';
                this.tableHead[39].label = this.tableHead[39].label + '(min)';
                this.tableHead[40].label = this.tableHead[40].label + '(min)';
                // console.log("表头数组")
                // console.log(this.tableHead)
            });
        },
        //点击查询
        submitSearchModel() {
            this.isPageClick=false;
            this.searchModel.currentPage = 1;
            this.QualityPassRateFind();
           
        },
        //调用查询方法
        QualityPassRateFind() {
            // 设置第二个表格数据
            QualityPassRateFind(this.searchModel)
                .then((res) => {
                    
                    var t=this.searchModel.pageSize;

                    //设置第二个表格数据
                    this.totalTableData = res.data.welldrillInfoList.records;
                    this.totalData = res.data.welldrillInfoList.total;
                    //设置Echat图查询全部
                    this.searchModel.pageSize=10000;
                    //不是分页点击时要更新echart图
                    if(!this.isPageClick){
                    QualityPassRateFind(this.searchModel).then((res) => {
                        this.countTableData[0].qualifiedWellNum = res.data.welldrillInfoCount.qualifiedWellNum;
                        this.countTableData[0].unqualifiedWellNum = res.data.welldrillInfoCount.unQualifiedWellNum; //设置表格数据
                        this.tableshow = true;
                        //设置echarts数据
                        this.countChartData.series[0].data[0] = res.data.welldrillInfoCount.qualifiedWellNum;
                        this.countChartData.series[0].data[1] = res.data.welldrillInfoCount.unQualifiedWellNum;
                        this.echartshow();
                    })}
                     this.$message.success('查询数据成功');
                    this.searchModel.pageSize=t;
                })
                .catch((err) => {
                    console.log('查询数据错误原因:' + err);
                    this.$message.error('查询出错，请刷新！');
                });
            // var echarts = require('echarts');
            // var chartDom = document.getElementById('countChart');
            // var countChart = echarts.init(chartDom);
        },
        // 展示图表内容
        echartshow() {
            let countCharte = this.$echarts.init(document.getElementById('countChart'));
            countCharte.setOption(this.countChartData);
            //this.countChartData &&countChart.setOption(this.countChartData);
        },
        //获取该页面所有需要的列表
        GetList() {
            ListDataDictByCondition('井型')
                .then((res) => {
                    this.welltypeOptions = res.data;
                })
                .catch((err) => {
                    console.log('获取井型列表失败：');
                    console.log(err);
                });
            ListDataDictByCondition('井别')
                .then((res) => {
                    this.wellcategoryOptions = res.data;
                })
                .catch((err) => {
                    console.log('获取井别列表失败：');
                    console.log(err);
                });
            ListDataDictByCondition('油田')
                .then((res) => {
                    console.log('获取油田列表成功：');
                    console.log(res);
                    this.oilfieldOptions = res.data;
                })
                .catch((err) => {
                    console.log('获取油田列表失败：');
                    console.log(err);
                });
            ListDataDictByCondition('区块')
                .then((res) => {
                    this.blockOptions = res.data;
                })
                .catch((err) => {
                    console.log('获取区块列表失败：');
                    console.log(err);
                });
        }
    }
};
</script>

<style scoped>
.headerstyle {
    font-size: 17px;
    background-color: #eef0f6;
    height: 30px;
    padding: 5px 10px;
}
#countChart {
    height: 350px;
    width: 45%;
}
.upload-demo {
       display: inline-block;
       width: 68px;
       height: 100%;
       margin-left: 0px;
}
/* .el-upload {
    display:none; 
    text-align:inherit; 
    cursor:default; 
    outline: 0;
} */
.upload-demo >>> .el-upload--text{
    background-color: #fff;
    border: 0px dashed #d9d9d9;
    border-radius: 6px;
    /* -webkit-box-sizing: border-box; */
    box-sizing: border-box;
    width: 100%;
    height: 100%; 
    text-align: center;
    cursor: pointer; 
    position: initial;
    overflow: initial; 
}
</style>
